<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>管理员后台管理</title>
    <style>
        img {
            width: 115px;
            height: 172px;
        }

        .search {
            margin-top: 10px;
            margin-left: 50px;
            width: 400px !important;
            float: left;
            display: inline-block !important;
        }

        .list {
            margin-left: 42px !important;
            font-size: 17px;
        }

        .icon {
            cursor: pointer;
            margin-left: 5px;
            margin-top: 10px;
            display: inline-block !important;
            float: left;
        }


        .book-info {
            position: absolute;
            left: 160px;
            top: 10px;
            height: 150px;
            width: 550px;
            overflow: hidden;
        }

        .book-sale {
            position: absolute;
            left: 950px;
            top: 45px;
            height: 120px;
            width: 500px;
        }

        .detail {
            margin-top: 7px;
            font-size: 14px;
            height: 70px;
            -webkit-line-clamp: 3;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
        }

        .author {
            margin-top: 5px;
            font-size: 13px;
        }

        .price {
            margin-top: 5px;
            color: #ff2832;
            font-size: 18px;
        }

        .title {
            margin-top: 5px;
            font-size: 18px;
            color: #2e6da4;
        }
        .list-group-item {
            margin-left: 100px;
            margin-right: 100px;
        }

        .list-group-horizontal {
            padding-right: 50px;
        }

        .edit {
            float: left;
            margin-top: 50px;
            margin-left: 40px;

        }
        .delete{
            float: left;
            margin-top: 50px;
            margin-left: 70px;
        }


        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
            margin: 0;
        }

        input[type="number"] {
            -moz-appearance: textfield;
        }


        .form {
            float: left;
        }

        .panel-footer {
            text-align: center;
        }

    </style>
</head>
<body>
<link rel="stylesheet" th:href="@{/css/bootstrap-3.3.7.css}">
<script th:src="@{/script/jquery-2.1.1.js}"></script>
<script th:src="@{/script/bootstrap-3.3.7.js}"></script>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" th:href="@{/admin/main}">基于springboot+mybatis+springsecuity+jwt的图书交易系统</a>
            <svg t="1670769465107" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="2534" width="30" height="30">
                <path d="M896 128v832H224a96 96 0 1 1 0-192H832V0H192C121.6 0 64 57.6 64 128v768c0 70.4 57.6 128 128 128h768V128h-64z"
                      fill="" p-id="2535"></path>
                <path d="M224.064 832H224a32 32 0 0 0 0 64H831.936v-64H224.064z" fill="" p-id="2536"></path>
            </svg>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <form th:action="@{/admin/select}" method="post" class="form">
                    <input type="text" placeholder="请输入图书名" class="form-control search"
                           name="bookName" id="bookName"/>
                    <svg onclick="$('form').submit()" class="icon" t="1670244573250" viewBox="0 0 1024 1024"
                         version="1.1"
                         xmlns="http://www.w3.org/2000/svg"
                         p-id="918" width="30" height="30">
                        <path d="M909.632 854.528l-259.712-259.712c40.32-52.096 62.08-115.84 62.08-182.848a298.24 298.24 0 0 0-87.872-212.096A297.792 297.792 0 0 0 411.968 112a298.24 298.24 0 0 0-212.096 87.872A297.6 297.6 0 0 0 112 411.968c0 80.128 31.36 155.52 87.872 212.16a297.6 297.6 0 0 0 212.096 87.872 297.6 297.6 0 0 0 182.72-62.016l259.712 259.584c3.2 3.2 8.384 3.2 11.584 0l43.584-43.52a8.192 8.192 0 0 0 0-11.52z m-339.2-284.16a222.784 222.784 0 0 1-158.464 65.6 222.784 222.784 0 0 1-158.4-65.536 222.784 222.784 0 0 1-65.6-158.464c0-59.776 23.36-116.096 65.664-158.4a222.784 222.784 0 0 1 158.336-65.6c59.84 0 116.16 23.232 158.4 65.664a222.784 222.784 0 0 1 65.6 158.336c0 59.84-23.296 116.16-65.536 158.4z"
                              p-id="919" fill="#707070">
                        </path>
                    </svg>
                </form>
                <li class="dropdown list">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        图书管理
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a th:href="@{/admin/main}" style="font-size: 17px;">浏览书籍</a></li>
                        <li class="divider"></li>
                        <li><a th:href="@{/admin/book/add}" style="font-size: 17px;">添加书籍</a></li>
                    </ul>
                </li>
                <li class="dropdown list">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        用户管理
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a th:href="@{/admin/user/main}" style="font-size: 17px;">浏览用户</a></li>
                        <li class="divider"></li>
                        <li><a th:href="@{/admin/user/add}" style="font-size: 17px;">添加用户</a></li>
                    </ul>
                </li>
                <li class="list"><a th:href="@{/logout}">退出系统</a></li>
                <li class="list"><a th:href="@{/logout}">admin@localhost</a></li>
            </ul>
        </div>
    </div>
</nav>
<ul class="list-group-horizontal">
    <li class="list-group-item" th:each="book:${bookList}">
        <img th:src="'http://'+${book.bookUrl}" alt="着魔">
        <div class="book-info">
            <div class="title" th:text="${book.bookName}">着魔</div>
            <div class="author" th:text="${book.bookAuthor}">赫尔曼·布洛赫</div>
            <div class="price" th:text="'¥'+${book.bookPrice}">¥78.00</div>
            <div class="detail" th:text="${book.bookDetail}">
                《着魔》是曾获诺贝尔文学奖提名、被誉为“中欧最伟大的四位小说家”之一的奥地利作家赫尔曼·布洛赫的长篇小说代表作。故事发生在“一战”后十年，讲述了一个流浪汉来到一个小山村后，用他致命的、有害的思想污染了整个村庄，导致全体村民陷入着魔状态，继而引发了一系列邪恶事件……
            </div>
        </div>
        <div class="book-sale">
            <button type="button" class="btn btn-warning edit">编辑书籍</button>
            <button type="button" class="btn btn-danger delete">删除书籍</button>
        </div>

    </li>

</ul>
<div class="panel-footer">当前 <span th:text="${pageInfo.pageNum}"></span> 页,总 <span
        th:text="${pageInfo.pages}"></span> 页,共
    <span th:text="${pageInfo.total}"></span> 条记录
</div>
<div class="panel-footer">
    <a th:href="@{/admin/main/1}">首页</a>
    <!--<a th:href="@{/user/main(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}">上一页</a>-->
    <a th:href="@{/admin/main/}+(${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)">上一页</a>
    <!--<a th:href="@{/user/main(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}">下一页</a>-->
    <a th:href="@{/admin/main/}+(${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})">下一页</a>
    <!--<a th:href="@{/user/main(pageNum=${pageInfo.pages})}">尾页</a>-->
    <a th:href="@{/admin/main/}+${pageInfo.pages}">尾页</a>
</div>
</body>
</html>